<template>
	<div>
		<!--首页tab滚动切换模块 可左右滑动切换-->
		<!--<div class=" cjy-scroll " style="overflow-x: scroll;height: 2.5rem ">-->
		<div style="height: 100%;position: relative;" ref="navhead">
			<ul class="cjy-list" style="min-width: 100%">
				<!--:style="{color: activeList == index ?styleConfig.colorStyle:'' , width:width}"-->
				<li class="cjy-tab-item" v-for="(item, index) in titleInfor" :key="index" @click=" changeIndex(index,item)" ref="titleLi">
					<slot name="textBox" :activeStyle="activeStyle" :normalStyle="normalStyle" :isActive="activeList == index"
								:title="item.goodsClassName">

					</slot>
				</li>
				<!--每个分类选项按钮end-->
			</ul>

		</div>

	</div>
</template>

<script>
import BScroll from "better-scroll";
import PopUp from "@/real-components/PopUps";
import TapSelectBox from "@/real-components/TapSelectBox";

export default {
	data() {
		return {
			classifyClum: false, //控制下拉菜单的
			backGroundColor: "rgba(255, 255, 255, 0.8)",
			colorStyle: "",
			normalStyle: null,
			activeStyle: null,
			activeList: 0,
			tabinsex: null,
			outerWidth: null
		};
	},
	props: {
		pullDownTitle: {
			type: String,
			default: "分类"
		},
		//下拉菜单
		pullDownMemu: {
			type: Boolean,
			default: true
		},
		titleInfor: {
			type: Array,
			//传入的数据如下 分类名称必传
			default: () => [
				{
					goodsClassId: "",
					goodsClassName: "分类"
				}
			]
		},
		styleConfig: {
			type: Object,
			default: () => {
				return {
					clicktabtextcolor: "red",
					activeFontSize: "",
					clicktabbgcolor: "transparent",
					activeBorderColor: "",
					tabtextcolor: "black",
					normalFontSize: "",
					normalBackgroundColor: "transparent",
					normalBorderColor: "transparent"
				};
			}
		},
		activeIndex: {
			type: Number,
			default: 0
		},
		tabindex: {
			type: String,
			default: "0"
		}
	},
	components: {
		TapSelectBox,
		PopUp
	},
	watch: {
		activeIndex(newData) {
			this.changeActiceIndex(newData);
		},
		activeList(newData) {
			setTimeout(() => {
				this.tapMove(newData);
			}, 50);
		},
		titleInfor() {
			this.scroll.refresh();
		},
		styleConfig(data) {
			console.log("styleConfig", data);
			this.initStyleConfig();
		},
		tabindex(data) {
			this.tabinsex = data;
			this.changeIndex(this.tabinsex);
		}
	},
	methods: {
		changeActiceIndex(index) {
			var maxLength = this.titleInfor ? this.titleInfor.length : 0;
			var activeIndex = Math.min(maxLength, index);
			this.activeList = Math.max(0, index);
		},
		changeIndex(index, item) {
			this.changeActiceIndex(index);
			this.$emit("tabOnChange", index, item);
		},

		initStyleConfig() {
			var styleConfig = this.styleConfig;
			console.log(styleConfig,'styleConfig')
			this.normalStyle = {
				fontSize: styleConfig.normalFontSize || "",
				color: styleConfig.tabtextcolor || "",
				borderColor: styleConfig.normalBorderColor || "",
				backgroundColor: styleConfig.normalBackgroundColor || ""
			};

			this.activeStyle = {
				fontSize: styleConfig.activeNormalFontSize || "",
				color: styleConfig.clicktabtextcolor || "299a28",
				borderColor: styleConfig.activeBorderColor || "",
				backgroundColor: styleConfig.clicktabbgcolor || ""
			};
		},
		tapMove(newData) {
			var testDiv = this.$refs.titleLi;
			var index = newData;
			var activeTitle = testDiv ? testDiv[index] : "";
			var scrollLeft;
			this.outerWidth = this.$refs.navhead
				? this.$refs.navhead.offsetWidth
				: 375;
			if (!activeTitle) {
				return;
			}
			scrollLeft = Math.max(
				0,
				activeTitle.offsetLeft -
					this.outerWidth / 2 +
					activeTitle.offsetWidth / 2
			);
			scrollLeft = Math.min(
				scrollLeft,
				this.scroll.scrollerWidth - this.outerWidth
			);
			this.scroll.scrollTo(-scrollLeft, 0, 500, "easing");
		}
	},

	created() {},
	mounted() {
		this.initStyleConfig();
		this.$nextTick(() => {
			var scroll = new BScroll(this.$refs.navhead, {
				startX: 0,
				startY: 0,
				scrollX: true,
				scrollY: false,
				click: true,
				bounce: false,
				momentumLimitDistance: 5
			});
			this.scroll = scroll;
		});
	},
	updated() {
		this.$nextTick(() => {
			this.scroll.refresh();
			var maxIndex = this.titleInfor.length - 1 || 0;
			if (maxIndex < this.activeList) {
				this.activeList = maxIndex;
				this.changeIndex(this.activeList, this.titleInfor[this.activeList]);
			}
		});
	}
};
</script>

<style scoped>
.classify_select {
	right: 0;
	top: 0;
}

.cjy-tab-item {
	position: relative;
	z-index: 2;
	padding: 0.2rem 0.2rem;
	text-align: center;
	overflow: hidden;
	text-overflow: clip;
	word-break: break-all;
	white-space: inherit;
	/*border-bottom: 2px solid transparent;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto 0.5rem;
}

.cjy-tab-item-height {
	height: 100%;
	width: 4.5rem;
	line-height: 2.2rem;
	font-size: 0.7rem;
}

.active-list {
	/*border-bottom: 2px solid #0f8de0;*/
	color: #0f8de0;
}

.cjy-list {
	display: flex;
	position: absolute;
	height: 100%;
}

.cjy-outer {
	width: 100%;
	height: 2.2rem;
	position: relative;
	/*border-bottom:  solid rgb(234, 234, 234);*/
}

.cjy-scroll {
	position: relative;
	height: 100%;
	top: 3rem;
}

.aui-col-xs-3 {
	font-size: 0.7rem;
	min-width: 20%;
}

.nav-window-enter-active,
.nav-window-leave-active {
	transition: all 0.2s;
}

.nav-window-enter,
.nav-window-leave-to {
	transform: translatey(-100%);
	opacity: 0;
}

.cjy-slder {
	height: 100%;
	width: 0;
}

.cjy-active-slider {
	height: 100%;
	background: #0f8de0;
	position: absolute;
	bottom: 0;
	height: 2px;
	left: 0;
	z-index: 3;
	transition: 0.5s;
}

.active-item {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: transparent;
}

.cjy-background-white {
	background: rgba(255, 255, 255, 0.8);
}

.cjy-tab-item-text {
	display: inline-block;
	line-height: 1rem;
	padding: 0 0.3rem;
}
</style>
